<script setup>
import { ref } from 'vue'
import micIcon from './assets/mic.png'

// 按钮配置数据
const buttons = [
  { id: 'weather', text: '天气', size: 'large', icon: '☀️' },
  { id: 'family', text: '家人', size: 'medium', icon: '👨‍👩‍�' },
  { id: 'ac', text: '空调', size: 'small', icon: '❄️' },
  { id: 'kitchen', text: '厨房', size: 'medium', icon: '🍳' },
  { id: 'chat', text: '随便聊聊', size: 'large', icon: '💬' },
  { id: 'settings', text: '屏幕设置', size: 'small', icon: '⚙️' },
  { id: 'empty1', text: '', size: 'small', icon: '' },
  { id: 'empty2', text: '', size: 'medium', icon: '' },
  { id: 'empty3', text: '', size: 'small', icon: '' },
  { id: 'empty4', text: '', size: 'large', icon: '' }
]

// 控制麦克风图标显示的状态
const showMic = ref(false)
// 当前长按的按钮ID
const longPressButtonId = ref(null)
// 长按计时器
let longPressTimer = null
// 长按阈值（毫秒）
const LONG_PRESS_DURATION = 1000

// 点击事件处理 - 只保留"屏幕设置"按钮的点击事件
const handleClick = (id) => {
  // 只有屏幕设置按钮保留点击事件
  if (id === 'settings') {
    console.log(`${id}按钮点击`)
  }
}

// 长按开始
const handleMouseDown = (id, event) => {
  // 阻止默认行为，防止长按选中文字
  if (event) event.preventDefault()
  
  // 清除可能存在的计时器
  if (longPressTimer) clearTimeout(longPressTimer)
  
  // 设置新的计时器
  longPressTimer = setTimeout(() => {
    longPressButtonId.value = id
    showMic.value = true
    console.log(`${id}按钮长按`)
  }, LONG_PRESS_DURATION)
}

// 长按结束
const handleMouseUp = () => {
  if (longPressTimer) {
    clearTimeout(longPressTimer)
    longPressTimer = null
  }
}

// 鼠标离开按钮
const handleMouseLeave = () => {
  if (longPressTimer) {
    clearTimeout(longPressTimer)
    longPressTimer = null
  }
}

// 隐藏麦克风图标
const hideMic = () => {
  showMic.value = false
  longPressButtonId.value = null
}
</script>

<template>
  <div class="phone-screen">
    <!-- 麦克风图标 -->
    <div v-if="showMic" class="mic-overlay" @click="hideMic">
      <img :src="micIcon" alt="麦克风" class="mic-icon" />
    </div>
    
    <div class="control-panel">
      <button 
        v-for="btn in buttons" 
        :key="btn.id"
        :class="['panel-btn', btn.size, {empty: !btn.text}]"
        @click="handleClick(btn.id)"
        @mousedown="(event) => handleMouseDown(btn.id, event)"
        @mouseup="handleMouseUp"
        @mouseleave="handleMouseLeave"
        @touchstart="(event) => handleMouseDown(btn.id, event)"
        @touchend="handleMouseUp"
        @touchcancel="handleMouseLeave"
      >
        <span class="icon">{{ btn.icon }}</span>
        <span v-if="btn.text" class="text">{{ btn.text }}</span>
      </button>
    </div>
    
    <!-- 底部标注 -->
    <div class="footer-text">
      <a href="https://mc.tencent.com/HRVjVcS5">Made in CodeBuddy</a> | <a href="https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/?from=csdn-hackathon-2025">Powered by CloudBase</a>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.phone-screen {
  width: 375px;
  height: 667px;
  background-color: #FFF9F5; /* 暖白色 */
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  padding: 20px;
}

/* 麦克风图标样式 */
.mic-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.mic-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  animation: scaleIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.5); }
  to { transform: scale(1); }
}

.control-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  height: 100%;
}

.panel-btn {
  background-color: #F0E0D6; /* 比背景深的暖米色 */
  color: #5A4A3F; /* 暖棕色文字 */
  border: none;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  user-select: none; /* 禁止用户选中按钮中的文字 */
  -webkit-touch-callout: none; /* 禁止iOS设备长按时出现菜单 */
  -webkit-tap-highlight-color: transparent; /* 禁止触摸高亮效果 */
  touch-action: manipulation; /* 优化触摸操作 */
}

.panel-btn:hover {
  background-color: #E0D0C6; /* 悬停时更深的颜色 */
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.panel-btn:active {
  transform: translateY(0);
}

/* 按钮大小 */
.large {
  grid-row: span 2;
  height: 180px;
}

.medium {
  height: 120px;
}

.small {
  height: 80px;
}

.icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.text {
  font-size: 16px;
  font-weight: 500;
}

.empty {
  background-color: #FFF0E5;
  opacity: 0.6;
}

.footer-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #8A7A70;
  opacity: 0.8;
  padding: 5px;
  user-select: none;
}
</style>